<template>
  <div>
    <transition name="form-fold">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" :label-width="labelWidth">
        <template v-for="item in formList" :key="item.prop">
          <el-form-item v-if="item.type === 'select'" :label="item.label" :prop="item.prop">
            <el-select v-model="queryParams[item.prop]" :placeholder="item.place || `请选择${item.label}`"
              :clearable="item.clearable === false ? false : true" :style="{ width: item.width || '240px' }">
              <el-option v-for="dict in dicts[dictsMapping[item.prop]].value" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item v-else-if="item.type === 'date'" :label="item.label" :style="{ width: item.width || '420px' }">
            <el-date-picker v-model="queryParams.dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange"
              range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item v-else :label="item.label" :prop="item.prop">
            <el-input v-model="queryParams[item.prop]" :placeholder="item.place || `请输入${item.label}`"
              :clearable="item.clearable === false ? false : true" :style="{ width: item.width || '240px' }"
              @keyup.enter="handleQuery" />
          </el-form-item>
        </template>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </transition>
    <el-row :gutter="10" class="mb8">
      <slot></slot>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Download" @click="emit('export')"
          v-hasPermi="['wms:cont:export']">导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="emit('query')"></right-toolbar>
    </el-row>
  </div>
</template>

<script setup lang='ts'>
import { ref, getCurrentInstance } from 'vue'
// 字典以及字典对应关系
import { dicts, dictsMapping } from '../WmsTable/index';

// 定义类型接口
interface FormItem {
  type?: 'select' | 'date' | 'input' | string;
  label: string;
  prop: string;
  place?: string;
  clearable?: boolean;
  width?: string;
}

interface QueryParams {
  [key: string]: any;
  dateRange?: string[];
  pageNum?: number;
}

const { proxy } = getCurrentInstance();
const props = defineProps({
  formList: {
    type: Array as () => FormItem[], // 明确类型
    require: true,
    default: () => []
  },
  labelWidth: {
    type: String,
    default: "68px"
  },
})

// 使用 defineModel 实现双向绑定
const queryParams = defineModel<QueryParams>('queryParams', {
  required: true,
  default: () => ({})
});

const showSearch = ref(false);
const queryRef = ref()

const handleQuery = () => {
  if (queryParams.value) {
    queryParams.value.pageNum = 1;
  }
  emit('query')
}

const resetQuery = () => {
  queryParams.value.dateRange = [];
  queryRef.value?.resetFields(); // Use el-form's resetFields method
  handleQuery();
}

// 添加事件
const emit = defineEmits(['query', 'export'])
</script>